/**
 * @description 申请成为会员
 */
<template>
	<div class="wrapper">
		<div class="header">
			<div class="tips">申请成为圈主需要满足以下条件：</div>
		</div>
		<div class="item-wrapper">
			<div class="item level-item">
				<div class="icon">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/applyLv.png" alt=""/>
				</div>
				<div class="content">
					<div class="content-name">等级达到3级</div>
					<div class="content-desc">所申请的圈内等级需要>3级别</div>
				</div>
				<div class="status">
					<span v-if="canApply">已达成</span>
					<span v-else>未达成</span>
				</div>
			</div>
			
			<div class="item">
				<div class="icon">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/applyEd.png" alt=""/>
				</div>
				<div class="content">
					<div class="content-name">在校生/毕业生</div>
					<div class="content-desc">需要上传在校生毕业生证件</div>
				</div>
			</div>
		</div>
		
		
		<button class="apply"  v-if="canApply" @click="show=true">
			申请认证
		</button>
		<div class="apply apply-false"  v-else>
			申请认证
		</div>
		
		<van-popup :show="show" position="center" @click="onpopup" round :close-on-click-overlay="true" @close="show=false">
		    <div class="register-wrapper">
				<div class="header-popup">
					<!-- <image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/applyEd.png" @click="show=false"></image> -->
				</div>
				<div class="tit">圈主申请</div>
				<div class="desc">请联系你的哔哔机友</div>
				<div class="qrcode-wrapper" @click="prevImg('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/applyCode.jpg')">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/applyCode.jpg" mode="widthFix" class="qrcode"></image>
				</div>
				<div class="btn">知道了</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	let defaultBanner=require('../../../static/img/123.jpg')
	export default {
		data() {
			return {
				defaultJpg:defaultJpg,
				circle_id:'',
				canApply:false,
				show:false
			};
		},
		methods:{
			onpopup(){
			    if (this.show){
			        this.show = false;
			    } else {
			        this.show = true;
			    }
			
			},
			prevImg(img){
				//预览图片
				uni.previewImage({
					current:img,
					urls:[img]
				})
			},
			async requestCircleAdmin(){
				//判断是否能申请成为会员
				let params={
					user_token:uni.getStorageSync('userToken'),
					circle_id:this.circle_id
				}
				let res=await this.$api.requestCircleAdmin(params);
					if(res.data.level=='success'){
						this.canApply=true
					}else{
						this.canApply=false
					}
			}
		},
		onLoad(options) {
			this.circle_id=options.circle_id;
			this.requestCircleAdmin()
		}
	}
</script>

<style lang="scss">
	@import '~@/static/scss/mixin.scss';
	.wrapper{
		background: #F1F4F7;
		min-height: 100vh;
		.header{
			background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/circleApplyBg.png');
			background-size: 100% 100%;
			height: 496rpx;
			position: relative;
			.tips{
				position: absolute;
				top:300rpx;
				left:40rpx;
				font-size: 24rpx;
				color:#fff;
			}
		}
		
		.item-wrapper{
			position: relative;
			top:-140rpx;
		}
		.item{
			@include flex();
			border-radius: 20rpx;
			height: 200rpx;
			padding:25rpx;
			margin:20rpx auto;
			background: #fff;
			width: 90vw;
			.icon{
				height: 100%;
				padding: 0 20rpx;
				image{
					width:40rpx;
					height: 40rpx;
					transform:translateY(-10rpx);
				}
			}
			.content{
				flex:1;
				height: 100%;
				@include flex(space-between,flex-start);
				flex-direction: column;
				.content-name{
					font-weight: 800;
					color:#000000;
				}
				.content-desc{
					color:gray;
				}
			}
			.status{
				height: 100%;
				color:#B4B7BB;
				font-size: 26rpx;
			}
			
		}
		
		.apply{
			width: 90vw;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 20rpx;
			margin:30rpx auto;
			background:rgba(255,226,38,1);
			font-weight: 800;
			text-align: center;
			position: relative;
			top:-100rpx;
			}
			.apply-false{
				background: gray;
				color:#fff;
			}
			.register-wrapper{
				width: 80vw;
				min-height: 500rpx;
				.header-popup{
					image{
						width:40rpx;
						height: 40rpx;
					}
					margin:20rpx;
				}
				.tit{
					text-align: center;
					color:#292929;
					font-weight:600;
					font-size: 36rpx;
					line-height: 36rpx;
				}
				.desc{
					text-align: center;
					color:#6F7073;
					font-size:28rpx;
					line-height: 28rpx;
					margin:40rpx auto;
				}
				.qrcode-wrapper{
					@include flex();
					.qrcode{
						width:200rpx;
						height: 200rpx;
						margin:20rpx auto;
					}
				}
				.btn{
					background: #FFE226;
					height:88rpx;
					text-align: center;
					font-weight: 600;
					font-size: 28rpx;
					line-height: 88rpx;
					width:calc(80vw - 300rpx) ;
					margin:60rpx 0 60rpx 150rpx ;
					background:rgba(255,226,38,1);
					border-radius:16rpx;
				}
				
			}
	
	}
</style>
